<template>
  <view class="wheel-container">
    <view class="wheel-wrapper">
      <view class="wheel" :style="wheelStyle">
        <view
          class="wheel-item"
          v-for="(item, index) in items"
          :key="index"
          :style="getItemStyle(index)"
        >
          {{ item }}
        </view>
      </view>
	  <image
	    class="center-image"
	    src="@/common/images/R.jpg"
	    mode="aspectFill"
	  ></image>
      <view class="pointer">▼</view>
    </view>
    <button class="spin-button" @click="spinWheel">开始抽取</button>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { defineProps } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})

const angle = ref(0)              // 最终目标角度
const currentAngle = ref(0)      // 当前动画中角度
const spinning = ref(false)      // 是否正在旋转

// 转盘样式
const wheelStyle = computed(() => ({
  transform: `rotate(${angle.value}deg)`,
  transition: 'none', // 取消 transition，转动用 setTimeout 动画控制
}))

// 每个 item 的样式（文字水平，绕圆心旋转）
const getItemStyle = (index) => {
  const total = props.items.length
  if (total === 0) return {}

  const deg = 360 / total
  const rotateDeg = index * deg

  return {
    transform: `rotate(${rotateDeg}deg) translateY(-100px) rotate(-${rotateDeg + currentAngle.value}deg)`
  }

}

// 旋转动画（缓动、角度补偿）
function spinWheel() {
  if (spinning.value || props.items.length === 0) return

  spinning.value = true

  const rounds = 5
  const randIndex = Math.floor(Math.random() * props.items.length)
  const singleAngle = 360 / props.items.length
  const targetAngle = 360 * rounds - randIndex * singleAngle

  const duration = 3000
  const frameRate = 16 // 约60fps
  const totalFrames = duration / frameRate
  let frame = 0
  const startAngle = angle.value

  function animate() {
    frame++
    const progress = Math.min(frame / totalFrames, 1)
    const easeOut = 1 - Math.pow(1 - progress, 3)
    const current = startAngle + (targetAngle - startAngle) * easeOut
    angle.value = current
    currentAngle.value = current % 360

    if (progress < 1) {
      setTimeout(animate, frameRate)
    } else {
      spinning.value = false
      uni.showToast({
        title: `选中: ${props.items[randIndex]}`,
        icon: 'none',
      })
    }
  }

  animate()
}
</script>

<style scoped>
.wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
}

.wheel-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.wheel {
  width: 100%;
  height: 100%;
  border: 8px solid ;
  border-color: pink;
  border-radius: 50%;
  position: relative;
  transform-origin: center center;
}

.wheel-item {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 60px;
 height: 50px;
 margin-left: -30px; /* 宽度一半，水平居中 */
 margin-top: -30px;  /* 高度一半，垂直居中 */
 text-align: center;
 font-size: 14px;
 
 /* 旋转中心在元素的水平中点，向下偏移转盘半径100px */
 transform-origin: 50% ;
 z-index: 10;

}


.pointer {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: red;
}

.spin-button {
  margin-top: 50rpx;
  background-color: #4caf50;
  color: white;
  padding: 20rpx 40rpx;
  border-radius: 12rpx;
}
.center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px; /* 适当比转盘稍小 */
  height: 180px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  z-index: -1;
}
</style>
